<template>
    <div id="oderlist" v-for="item,index in oderlist" :key="item.id" >
    <p><span>{{ item.productList[0].shop }}</span> <span>订单号:{{ item.order_num }}</span></p>
    <van-card
  
  :price=item.productList[0].price
  
  :title=item.productList[0].product
  :thumb=item.productList[0].picture
  @click="toDetail(item.productList[0])"
/>
<p class="lastP"><span class="total">总计:{{ item.productList[0].price }}</span></p>
<van-button type="default" size="small" @click="bindOrder_num(item.order_num),deloderlist(index)">取消订单</van-button><van-button type="warning" plain size="small">&nbsp;&nbsp;&nbsp;支付&nbsp;&nbsp;&nbsp;</van-button>
    </div>

    <van-empty description="空空如也" v-show="show"/>


</template>

<script setup lang="ts">
import { useOderlist,useRemoveorder } from '@/hooks/oderlist'
import { useToDetail } from '@/hooks/toDetail';
const {userinfoId,oderlist,show,deloderlist} = useOderlist()
const {bindOrder_num} = useRemoveorder()
const {toDetail} = useToDetail()







</script>

<style scoped lang="scss">
#oderlist{
    width: 100%;
    height: 187px;
    p:first-child{
       height: 12px;
       line-height:12px ;
       font-size: 12px;
       color: #444444;
       span:last-child{
        float: right;
       }
    }
    .van-button:first-child{
        margin-left: 246px;
    }
    .lastP{
        
        font-size: 18px;
        line-height: 20px;
        color: #E82050;
        span{
            float: right;
        }
    }
}
</style>